<!-- src/views/Profile.vue -->
<template>
    <div class="profile-page">
      <!-- 导航栏 -->
      <van-nav-bar left-arrow @click-left="onClickLeft" title="个人中心" />
  
      <!-- 用户头像和昵称 -->
      <div class="user-info">
        <img :src="userInfo.avatar" alt="User Avatar" class="avatar">
        <div class="user-details">
          <div class="user-name">{{ userInfo.nickname }}</div>
          <div class="user-level">普通会员</div>
        </div>
      </div>
  
      <!-- 功能项 -->
      <div class="functions-grid">
        <router-link to="/orders" class="function-item">
          <van-icon name="orders-o" size="24" />
          <span>我的订单</span>
        </router-link>
        <router-link to="/favorites" class="function-item">
          <van-icon name="star-o" size="24" />
          <span>我的收藏</span>
        </router-link>
        <router-link to="/address" class="function-item">
          <van-icon name="location-o" size="24" />
          <span>收货地址</span>
        </router-link>
        <router-link to="/settings" class="function-item">
          <van-icon name="setting-o" size="24" />
          <span>设置</span>
        </router-link>
        <router-link to="/coupons" class="function-item">
          <van-icon name="coupon-o" size="24" />
          <span>优惠券</span>
        </router-link>
        <router-link to="/points" class="function-item">
          <van-icon name="medal-o" size="24" />
          <span>积分</span>
        </router-link>
        <!-- 可以添加更多功能项 -->
      </div>
  
      <!-- 底部导航 -->
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact" to="/profile" class="active-tab">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        active: 3, // 默认激活第四个标签（我的）
        userInfo: {
          avatar: 'https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/default-avatar.jpg',
          nickname: '用户名'
        }
      };
    },
    methods: {
      onClickLeft() {
        this.$router.back(); // 返回上一页
      }
    }
  };
  </script>
  
  <style scoped>
  .profile-page {
    padding: 20px;
    background-color: #f7f7f7;
  }
  
  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 20px; /* 向下移动20px */
  }
  
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  
  .user-details {
    text-align: center;
  }
  
  .user-name {
    font-size: 18px;
    color: #333;
  }
  
  .user-level {
    font-size: 14px;
    color: #999;
    margin-top: 5px;
  }
  
  .functions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; 
    max-width: 1000px; 
    max-height: 400px;
    margin: 0 auto; 
  }
  
  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
  }
  
  .function-item span {
    margin-top: 5px;
    font-size: 14px;
  }
  
  .van-tabbar-item--active.active-tab {
    color: blue; /* 设置“我的”选项为蓝色 */
  }
  </style>